<template>
  <el-form ref="formRef" :rules="rules" :model="form">
    <el-form-item :label="props.modelValue.pageConfig.additionalParamLabel ?? '类型选择'"
      :prop="props.modelValue.pageConfig.additionalParamKey" v-if="props.modelValue.pageConfig.additionalParamOptions">
      <SingleLayerSelect
        v-model="form[props.modelValue.pageConfig.additionalParamKey]"
        :options="props.modelValue.pageConfig.additionalParamOptions" />
    </el-form-item>
<el-upload style="width: 100%;margin-top: 20px;" drag multiple :auto-upload="false"
    :on-change="handleChange"
    accept="*">
    <el-icon class="el-icon--upload"><upload-filled /></el-icon>
    <div class="el-upload__text">拖拽或者 <em>点击上传</em></div>
    <template #tip>
      <el-row style="margin-top: 20px;" align="middle">
        <el-col :span="20">
          <div class="upload-tips">{{ tips ? tips : '请上传需要导入的附件文件'}}</div>
        </el-col>
      </el-row>
    </template>
</el-upload>
</el-form>
<div style="display: flex;justify-content: flex-end;">
    <el-button @click="handleCancel">取消</el-button>
    <el-button @click="handleSave" type="primary">确认保存</el-button>
</div>
</template>

<script setup lang="ts">
import { FormRules, UploadFile, UploadFiles } from "element-plus";
import UploadApi from "../api/uploadApi";
import CommonApi from "../api/CommonApi";
import CompanyInfoInstitutionalTemplateApi from "../api/webPath/CompanyInfoInstitutionalTemplateApi";

interface Props {
  modelValue: {
    pageConfig: {
      additionalSaveParams: Record<any, any>,
      templateType?: string,
      paramMessage: string,
      additionalParamKey: string,
      additionalParamLabel?: string,
      additionalParamOptions: {
        value: any,
        label: any
      }[]

      typeSelect: boolean;
    };
  };
}
const tips = ref()
const form = ref<Record<string,any>>({})
const props = defineProps<Props>();
const rules = reactive<FormRules>({
  [props.modelValue.pageConfig.additionalParamKey]: {
    required: true,
    message: props.modelValue.pageConfig.paramMessage
  }
})
const fileList = ref<{name:string;url:string}[]>([])

onMounted(async () => {
  console.log("modelValue", props.modelValue);
  const { data:{records: templateList} }  = await CompanyInfoInstitutionalTemplateApi.getPageData({templateType:props.modelValue.pageConfig.templateType})
  tips.value =  templateList && templateList.length > 0 &&  templateList[0].templateDescribe
});

const emit = defineEmits(["update:modelValue", "callBack"]);
function handleChange(file: UploadFile, files: UploadFiles) {
  const form = new FormData();
    if (file.raw) {
      const loading = $baseLoading("上传中，请耐心等待");
      if (files)
        try {
          form.append("file", file.raw);
          UploadApi.upload(form).then((res) => {
            if (res) {
              const { data } = res
              fileList.value.push({
                  name: file.name,
                  url: data,
              })
              loading.close();
              file.status = "success";
            } else {
              loading.close();
              file.status = "fail";
            }
          });
        } catch (e) {
          console.log("error", e);
          loading.close();
        }
    } else {
      files.splice(0, 1)
    }
}

/**
 * 信息确认弹窗点击取消
 */
function handleCancel() {
//   showConfirmDialog.value = false;
  emit("callBack", "cancel")
}
/**
 * 信息确认后处理
 */
async function handleSave() {
  try {
    const res = await CommonApi.fileBatchUpload(JSON.stringify({...props.modelValue.pageConfig.additionalSaveParams,...form.value, fileList:fileList.value}))
    console.log("返回结果", res);
    $baseMessage("保存成功", "success");
    emit("callBack", "success");
  } catch (e) {
    console.log("保存错误：", e);
    $baseMessage("保存失败", "error");
    emit("callBack", "fail");
  }
}

</script>

<style scoped>
.horizontal-scroll-container {
  overflow-x: auto;
  /* 强制显示横向滚动条 */
  width: 100%;
  min-height: 100%;
  white-space: nowrap;
  /* 防止内容换行 */
}

.el-form {
  /* min-width: 1200px; */
  /* 确保内容宽度大于容器 */
  display: inline-block;
  width: 100%;
}
.upload-tips{
  font-size: 14px;
  color: red;
}
</style>
